<template>
  <div class="content">
    <div class="content-body">
      <div
        :class="['mode', item.commandValue === 3 ? 'mode3' : '']"
        :key="item.commandValue"
        @click="onModeClick(item, $event)"
        v-for="item in modeGrid"
      >
        <div class="mode-svg">
          <SvgIcon :svg-name="item.svg" color="var(--title-color)" />
        </div>
        <div class="con">
          <span class="title">{{ item.text }}</span>
          <span class="description">{{ item.description }}</span>
        </div>
        <div
          class="mode-btn"
          v-if="item.commandValue === 3"
          @click="handleReset"
        >
          更换
        </div>
      </div>
    </div>
  </div>

  <!-- 刷牙时长 -->
  <van-popup
    v-model:show="state.timeShow"
    round
    position="bottom"
    @open="open"
    @close="close"
    @click-overlay="onClickRadioOverlay"
  >
    <RadioPopup
      :list="timeList"
      :value="state.currentTime"
      :title="state.popupTitle"
      :randomOverlay="state.randomR"
      type="workTime"
      @emitCancel="emitCancel"
      @emitRadioChange="emitRadioChange"
    />
  </van-popup>

  <!-- 刷牙模式 -->
  <van-popup
    v-model:show="modeShow"
    round
    position="bottom"
    @open="open"
    @close="close"
    @click-overlay="onClickOverlay"
  >
    <ToothMode
      :mode="state._mode"
      :strength="props.strength"
      :randomOverlay="state.randomO"
      title="刷牙模式"
      @emitCancel="emitCancel"
      @emitModeChange="emitModeChange"
    />
  </van-popup>
</template>

<script setup>
import { reactive, defineProps, defineEmits, watch, ref } from 'vue'
import { modeList, timeCellList, deviceId } from '../../utils/enum'
import ToothMode from '@/components/Mode/ToothMode.vue'
import { sys } from '../../utils/sys'
import EventBus from '@/assets/common/EventBus'
import { useStore } from 'vuex'
import { showConfirmDialog, showToast } from 'vant'

const { convertMode } = require('@/utils/util')
const store = useStore()

const props = defineProps(['workTime', 'mode', 'strength', 'useSize'])
const emit = defineEmits(['emitModeChange'])

const state = reactive({
  color: sys.color.DEAULT_COLOR,
  _mode: props.mode,
  currentTime: Number(props.workTime),
  timeShow: false,
  popupTitle: '刷牙时长',
  _useSize: 180,
  randomR: Math.random(),
  randomO: Math.random()
})
// 刷牙模式
const modeShow = ref(false)
// 模式list
let modeGrid = reactive(modeList)

watch(
  () => store.state.deviceInfo,
  val => {
    const { workTime, mode, useSize } = val
    // 设置工作时间
    state.currentTime = workTime
    modeGrid[0].description = workTime ? `${workTime}分钟` : '--分钟'
    // 设置模式
    state._mode = mode
    modeGrid[1].description = mode ? convertMode(mode) : '--'
    // 牙刷剩余次数
    state._useSize = useSize
    modeGrid[2].description = useSize ? `剩余${useSize}次` : '剩余--次'
  },
  { deep: true, immediate: true }
)

const timeList = reactive(timeCellList)

const handleReset = () => {
  if (!store.state.deviceConnected) {
    showToast('设备已离线,请先启动牙刷再进行设置!')
    return
  }
  showConfirmDialog({
    confirmButtonText: '确定',
    message: '更换新刷头后，点击确定，刷头使用剩余次数将重新以180次计算。'
  })
    .then(() => {
      // on confirm
      state._useSize = 180
      modeGrid[2].description = `剩余180次`

      Hejia.setControlParam(
        {
          // deviceId,
          parameters: {
            param: [
              {
                name: 'useSize',
                content: 180
              }
            ]
          }
        },
        function () {
          // success, no response
        },
        function (msg, obj) {
          console.log(obj.resultCode + obj.resultCodeMessage)
        }
      )
    })
    .catch(() => {
      // on cancel
    })
}

const open = () => {
  EventBus.emit('stopInterval')
}
const close = () => {
  setTimeout(() => {
    EventBus.emit('startInterval')
  }, 1000)
}

const onClickRadioOverlay = () => {
  state.randomR = Math.random()
}
const onClickOverlay = () => {
  state.randomO = Math.random()
}

// 功能模式选择
const onModeClick = item => {
  if (!store.state.deviceConnected) {
    showToast('设备已离线,请先启动牙刷再进行设置!')
    return
  }

  const { commandValue } = item

  if (commandValue == 2) {
    // 刷牙模式
    modeShow.value = true
  } else if (commandValue == 1) {
    // 刷牙时长
    state.timeShow = true
  }
}

const emitCancel = key => {
  if (key == 'time') {
    state.timeShow = false
  } else {
    modeShow.value = false
  }
}

const emitRadioChange = val => {
  state.currentTime = val
  modeGrid[0].description = `${val}分钟`
  state.timeShow = false
}
// 刷牙模式
const emitModeChange = (mode, strength) => {
  emit('emitModeChange', mode, strength)
  // 模式
  state._mode = mode
  modeGrid[1].description = convertMode(mode)
  modeShow.value = false
}
</script>

<style lang="less" scoped>
@import url(../../assets/style/style.less);
</style>
